{% load markuptags %}{% load resourcestags %}
{% get_siteimage for chunk.vars.name as si size chunk.vars.size %}

{% if chunk.vars.link %}
<a href="{{ chunk.vars.link }}">
{% else %}
<a href="{% siteimage_url chunk.vars.name chunk.vars.size %}" target="_blank">
{% endif %}

    <div id="oi-{{ si.name }}" class="{{ chunk.vars.float }}" style="line-height:0;">
        <div style="width:{{ si.w }}px; height:{{ si.h }}px; position:relative; overflow:hidden;">

            {% siteimage chunk.vars.name chunk.vars.size %}

            <div class="overlay-outer" style="position:relative; top:0px; height:{{ si.h }}px; ">
                <div style="width:{{ si.w }}px; height:{{ si.h }}px; top:-{{ si.h }}"
                    class="image-overlay-background" >
                </div>
                <div style="width:{{ si.w }}px;height:{{ si.h }}px;top:-{{ si.h }}px;"
                     class="image-overlay">
                    {% if chunk %}
                    <div class="caption" style="width:{{ si.w }}px;">
                    {% for line in chunk %}{% if line %}<p>{{ line|postmarkup }}</p>{% endif %}{% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>
            <div id="oiarea-{{ chunk.vars.name }}" style="z-index:40;width:{{ si.w }}px; height:{{ si.h }}px; position:relative; top:-{{ si.twice_h }}px;">
            </div>

        </div>
    </div>

</a>
